import { DetailRes, fetchDetailAPI } from "@/apis/details"
import { NavBar } from "antd-mobile"
import { useEffect, useState } from "react"
import {  useSearchParams, useNavigate } from "react-router-dom"

function Detains() {
    const [detail, setDetail] = useState<DetailRes | null>(null)

    //获取路由参数
    const [param] = useSearchParams()
    const id = param.get('id')

    // const { id } = useParams()

    useEffect(() => {
        const getDetails = async () => {
            try {
                //id!   代表id参数不为空的意思
                const res = await fetchDetailAPI(id!)
                setDetail(res.data.data)
            } catch (error) {
                throw new Error("this is msg error Details")
            }

        }
        getDetails()
    }, [id])

    const navigate = useNavigate()
    //返回方法
    const back = () => {
        navigate(-1)
    }


    // //数据返回之前 lodding 渲染占位
    if (!detail) {
        return <div>this is lodding...</div>
    }


    //数据返回之后 正式渲染的内容
    return (
        <div>
            <NavBar onBack={() => back()}>{detail?.title}</NavBar>
            <div className="xxxx" dangerouslySetInnerHTML={
                {
                    __html: detail?.content
                }
            }></div>
        </div>
    )
}

export default Detains